import $ from 'jquery';
export function chartShowName(chart) {
    /**
     * 注意这里，是以X轴显示内容过长为例，如果是y轴的话，
     * 需要把params.componentType == 'xAxis'改为yAxis
     * 判断是否创建过div框,如果创建过就不再创建了
     * 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
     * */

    let elementDivId = document.getElementById('extension');
    if (!elementDivId) {
        let div = '<div id = \'extension\' sytle="display:block"></div>';
        $('html').append(div);
    }
    chart.on('mouseover', (params) => {
        if (params.componentType == 'xAxis') {
            //设置悬浮文本的位置以及样式
            $('#extension')
                .css({
                    position: 'absolute',
                    color: '#333',
                    'font-size': '12px',
                    padding: '5px',
                    display: 'inline',
                    'border-radius': '4px',
                    'background-color': 'rgba(255, 255, 255, 0.5)',
                    'box-shadow': 'rgba(0, 0, 0, 0.3) 2px 2px 8px'
                })
                .text(params.value);

            document.querySelector('html').onmousemove = (event) => {
                // var elementDivId = document.querySelector('#extension')
                // var xx = event.pageX - 10
                // var yy = event.pageY + 15
                // elementDivId.style.top = yy + 'px'
                // elementDivId.style.left = xx + 'px'

                let xx = event.pageX - 10;
                let yy = event.pageY + 15;
                $('#extension')
                    .css('top', yy)
                    .css('left', xx);
            };
        }
    });
    chart.on('mouseout', (params) => {
        //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
        if (params.componentType == 'xAxis') {
            $('#extension').css('display', 'none');
        }
    });
}

// 禁用浏览器缩放
export function forbidZoom() {
    let keyCodes = [61, 107, 109, 173, 187, 189];
    document.addEventListener(
        'keydown',
        (ev) => {
            let e = ev || window.event,
                ctrlKey = e.ctrlKey || e.metaKey;
            if (ctrlKey && keyCodes.includes(e.keyCode)) {
                e.preventDefault();
            } else if (e.detail) {
                ev.returnVlaue = !1;
            }
        },
        !1
    );
    document.body.addEventListener(
        'wheel',
        (ev) => {
            if (ev.ctrlKey) {
                if (ev.deltaY !== 0) {
                    ev.preventDefault();
                    return !1;
                }
            }
        },
        { passive: !1, captura: !1 }
    );
}

// 禁止浏览器缩放
// document.addEventListener('mousewheel', function (e) {
//   e = e || window.event;
//   if ((e.wheelDelta && event.ctrlKey) || e.detail) {
//     event.preventDefault();
//   }
// }, {
//   capture: false,
//   passive: false
// });
// document.addEventListener('keydown', function (event) {
//   if ((event.ctrlKey === true || event.metaKey === true) &&
//     (event.keyCode === 61 || event.keyCode === 107 ||
//       event.keyCode === 173 || event.keyCode === 109 ||
//       event.keyCode === 187 || event.keyCode === 189)) {
//     event.preventDefault();
//   }
// }, false)
